<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>用户注册</title>
	</head>
	
	<body>
			<%!int a=11; %>
			
			<%!
				public static int add(int a , int b){
					return a+b;
				} 
			%>
			
			<%
					//int   a = 100;
			
					String aa = "aa&lt;%ab";
					System.out.print(aa);
			%>
			
			
			
			<%=a%>
			<%=add(20,20) %>
			
			&lt;%   %&gt;
			
			<!-- get/post请求的区别 -->
			
			用户名：<input type="text" name="username" value="所志松" />
			<br/>
			密码：<input type="password" name="password" value="123456" />
			
			<br/>
			性别：
			
			男<input type="radio" name="sex" checked="checked" value="1" />
			女<input type="radio" name="sex" value="0" />
			
			<br/>
			
			爱好：
			<input type="checkbox" checked="checked" name="hobbies" value="10" />  读书
			<input type="checkbox" checked="checked" name="hobbies" value="11" />  写字
			<input type="checkbox" name="hobbies" value="12" />  绣花
			<input type="checkbox" name="hobbies" value="13" />  睡觉
			
			
			<br/>
			
			城市：
			<select name="city">
				<option value="0731" selected="selected" >长沙市</option>
				<option value="0755" >深圳市</option>
			</select>
			
			<br/>
			<input type="hidden" name="money" value="12000" />
			
			<br/>
			
			简单介绍：
			
			<textarea name="detail" rows="5" cols="5">abc</textarea>
		
			<input type="button" id="bnt01" value="注册" />
	</body>



	<!-- 军规：凡是路径 js css 请求 全部用绝对路径 webapp  -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.4.js" ></script>
	
	<script type="text/javascript">
	
	
		$(function(){
			
			$('#bnt01').click(function(){
				
				//1 获取用户名和密码
				var username = $('input[name="username"]').val();  //scott
				var password = $('input[name="password"]').val();  //123456
				
				var hobbiesNode = $('input[name="hobbies"]:checked');
				
				var sb='';
				hobbiesNode.each(function(index,data){
					
					console.log(index);
					
					if(index != hobbiesNode.length-1){
						sb = sb+data.value+',';
					}else{
						sb = sb+data.value;
					}
					console.log(data.value);
				});
				
				console.log(sb);
				
				
				var city = $('select[name="city"]')[0].value;
				console.log(city);
				
				
				var money = $('input[name="money"]').val();
				console.log('money='+money);
				
				
				var detail = $('textarea[name="detail"]').val();
				console.log('detail='+detail);
				
				
				//通用的办法  搞成1个字符串  但是用,隔开  
				// '10,11'
				
				//2 用ajax往后台发送数据 json  后台拿到用户名和密码 插入到数据库中
				
				var url="${pageContext.request.contextPath}/user?method=register";
				
				// {'username':'scott','password':'123456'}
				var data={
						
						//java
						'username':username,
						'password':password,
						'sex':$('input[name="sex"]:checked').val(),
						'hobbies':sb,
						'city':city,
						'money':money,
						'detail':detail,
				};
				$.get(url,data,function(jsonData){
					
					//jsonData 后台给前台的返回值
					
					var counter  =jsonData.counter;
					
					if(counter == 1){
						//插入成功 跳转到成功页面
						window.location.href="${pageContext.request.contextPath}/user/success.jsp";
						
					}else{
						//插入成功 跳转到失败页面
						window.location.href="${pageContext.request.contextPath}/user/failure.jsp";
					}
					console.log(data.message);
					console.log('请求成功...');
					
				},'json');
				
				
				//3 响应结果到前台
				
				
			});
		});	
	</script>
</html>